<template>
  <el-menu
    :default-active="$route.path"
    router
    text-color="#222"
    active-text-color="red"
    class="space-menu"
    mode="vertical">
    <el-menu-item
      v-for="route in routes"
      :key="route.path"
      :index="route.path"
      :class="$route.path===route.path?'is-active':''">
      <i v-bind:class="route.icon"></i>
      {{route.navItem}}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
  data(){
    return{
      routes:[
        {path:'/space/info',navItem:'用户资料',icon:'el-icon-user'},
        {path:'/space/paper',navItem: '我上传的论文',icon:'el-icon-document'},
        {path:'/space/note',navItem:'我的笔记',icon:'el-icon-collection-tag'},
      ]
    }
  },
  //添加元素滚动的监听事件

  methods:{

  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: inherit;
}

div, span {
  caret-color: transparent;
}

.space-menu{
  width: 170px;
  position: fixed;
}
</style>
